import {toJS} from "mobx";
import { inject, observer } from 'mobx-react';
import { Button,Modal,Rate,Tabs,Spin,Row,Col,Card,Progress,Form,Badge} from 'antd';
const ButtonGroup = Button.Group;
const TabPane = Tabs.TabPane;
import { WeaRightMenu,WeaTop,WeaTab,WeaErrorPage,WeaTools,WeaNewScroll,WeaSelect,WeaLeftRightLayout,WeaLeftTree,WeaFormItem,WeaSearchGroup,WeaProgress } from "ecCom";
import {WeaTableNew,WeaSwitch} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import CommonLedger from "./CommonLedger";
import * as Bctt from "../../constants/BaseListConstant";
import WeaCrmTab from "../comp/weaCrmTab";
// import {CubeDropdown} from "cubeComs";
import WeaDropdown from "../comp/weaCrmDropdown";
import Synergy from '../synergy/index';
import ContractRP from './ContractRP';
// import weaCube from 'weaCube';
// const BatchShareDialog =weaCube.common.ShareCom.BatchShareDialog;
import * as cct from '../../constants/CommonConstant';

@inject('myContractStore','synergyStore')
@observer
class MyContract extends CommonLedger {

    getStore(){
        return this.props.myContractStore;
    }

    // render before
    componentWillMount() {
        const componentParams = {...this.props.params,...this.props.location.query,...{page:"home"}};
        this.getStore().componentWillMount(componentParams);
    }
   

    getTableWidth = (columns) => {
        let showLength = columns.filter((col) => col.display == 'true').length;
        return 60 * showLength + "%";//也支持返回固定值，如果小于100%,不会生效。
      }
    render() {
        let synergyWidth = this.state.synergyWidth;
        const store = this.getStore();
        let {loading,showSearchAd,tableStore,searchKey,synergyParams,mainTabKey,rpData,topInfo,shareStore={},commonParams,attentions,conditionTop} = store;
       
        const {isUse,isShow,refId,tabKey,title} = synergyParams;
        let weaTableProps = {};//WeaTable中的属性集
        weaTableProps.comsWeaTableStore = tableStore;
        weaTableProps.hasOrder = true;
        weaTableProps.needScroll = true;
        if (this.reRenderColumns)
            weaTableProps.getColumns = c => this.reRenderColumns(c);
        if (this.onOperatesClick)
            weaTableProps.onOperatesClick = (record,index,operate,flag) => this.onOperatesClick(record,index,operate,flag);
        weaTableProps.ref="contract_table";

        let tableCom = <WeaTable {...weaTableProps} style={{paddingLeft:'10px',paddingRight:'10px',paddingTop:'5px'}}/>
        const searchTypes = this.getTabSearchTypes();
        let weaTabProps = {};//WeaTab中的属性集
        weaTabProps.selectedKey=mainTabKey;
        weaTabProps.keyParam="key"  //主键
        weaTabProps.countParam="groupid" //数量
        weaTabProps.onChange= key=>this.changeData(key);
        weaTabProps.datas=[{"title":conditionTop.mine,"key":"mine"},{"title":conditionTop.all,"key":"all"},{"title":conditionTop.att,"key":"att"}];
        let tabCom = <WeaTab {...weaTabProps} />;
        let weaCrmTabProps = {};//快捷搜索中的属性集
            weaCrmTabProps.searchType=searchTypes;
            weaCrmTabProps.selectGroups=this.getSelectGroups();
            weaCrmTabProps.searchsBaseValue=searchKey;
            weaCrmTabProps.onSearch=()=>{store.doSearch()};
            weaCrmTabProps.hasDropMenu=true;
            weaCrmTabProps.showSearchAd=showSearchAd;
            weaCrmTabProps.setShowSearchAd=bool=>store.setShowSearchAd(bool);
            weaCrmTabProps.searchsAd=<Form horizontal>{this.getSearchConditionForm(store)}</Form>;
            weaCrmTabProps.buttonsAd=this.getAdButtons(store);
            weaCrmTabProps.onSearchChange=v => store.setSearchKey(v);
            weaCrmTabProps.hideSearchAd = () => store.setShowSearchAd(false);
        let weaCrmTabCom = <WeaCrmTab {...weaCrmTabProps} />
        let showWeaTab = true;
        const reportContent = <ContractRP datas={toJS(rpData)} />;
        let WeaLeftRightLayoutProps = {};
        WeaLeftRightLayoutProps.isNew = true;
        WeaLeftRightLayoutProps.col = 2;
        WeaLeftRightLayoutProps.defaultShowLeft = true;
        WeaLeftRightLayoutProps.leftWidth = 250;
        WeaLeftRightLayoutProps.leftCom = 
            <div style={{ width: '100%', height: '100%' }} >
                <WeaLeftTree datas={toJS(store.contractType)} onSelect={(key,topTabCount,countsType)=>store.doSearch({"typeTreeId":key})}/>
            </div>;
        let WeaLeftRightLayoutCom = null;
        WeaLeftRightLayoutCom =  
            <WeaLeftRightLayout {...WeaLeftRightLayoutProps}> 
                {tabCom}
                {weaCrmTabCom}
                {reportContent}
                {/* <WeaNewScroll height={"calc(100% - 176px)"}> */}
                    {tableCom}
                {/* </WeaNewScroll> */}
            </WeaLeftRightLayout>;

        let BatchShareDialog = {};
        if(window.weaCube){
            BatchShareDialog = weaCube.common.ShareCom.BatchShareDialog;
        }

        return (
            <div >
                <WeaRightMenu datas={store.getRightMenus()}>
                    <WeaTop
                        loading={loading}
                        title={topInfo.titleName}
                        icon={<i className={cct.icon}/>}
                        iconBgcolor={cct.iconBgcolor}
                        showDropIcon={true}
                        dropMenuDatas={store.getRightMenus()}
                        buttons={store.getTopButtons()}
                        buttonSpace={10}
                    >
                    {WeaLeftRightLayoutCom}
             
                    </WeaTop>
                </WeaRightMenu>
                {(isUse&&<Synergy isUse={isUse} isShow={isShow} refId={refId} tabKey={tabKey} title={title} custom={synergyWidth} otherParams={commonParams}/>)}
                {(window.weaCube&&shareStore.visible&&<BatchShareDialog share={shareStore} params={{customerid:commonParams.customId,modeid:commonParams.modeId}}/>)}
            </div>
        )
    }


    getSelectGroups(){
        const {conditionTop,isShowResource,hrmType} = this.props.myContractStore;
        let that = this;
        let tabBtns = (function(){
            if(JSON.stringify(conditionTop)!=="{}"){
                if(isShowResource){
                    return <Tabs defaultActiveKey="" key={3}>
                        <TabPane tab={
                            <WeaDropdown 
                                keyValue="resourceid" 
                                defaultValue={toJS(conditionTop.hrmList)[0].name || ""} 
                                type="tree" 
                                datas={toJS(conditionTop.hrmList)} 
                                treeDatasChange={that.onHrmListChange.bind(that)}
                                onChange={that.selectChange.bind(that)}
                            />
                        } key="1"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue="hrmtype" defaultValue={toJS(conditionTop.viewTypeList)[hrmType].name} type="select" datas={toJS(conditionTop.viewTypeList)} onChange={that.selectChange.bind(that)}/>
                        } key="2"></TabPane> 
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.status} defaultValue={conditionTop.status} type="select" datas={toJS(conditionTop.statusSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="3"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.pay_type} defaultValue={conditionTop.payType} type="select" datas={toJS(conditionTop.payTypeSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="4"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.cons_count} defaultValue={conditionTop.consCount} type="select" datas={toJS(conditionTop.moneySelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="5"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.sign_date} defaultValue={conditionTop.signDate} type="select" datas={toJS(conditionTop.signDateSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="6"></TabPane>
                    </Tabs>;
                }else{
                    return <Tabs defaultActiveKey="" key={3}>
                        <TabPane tab={
                           
                            <WeaDropdown keyValue={conditionTop.conditionFields.status} defaultValue={conditionTop.status} type="select" datas={toJS(conditionTop.statusSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="3"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.pay_type} defaultValue={conditionTop.payType} type="select" datas={toJS(conditionTop.payTypeSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="4"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.cons_count} defaultValue={conditionTop.consCount} type="select" datas={toJS(conditionTop.moneySelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="5"></TabPane>
                        <TabPane tab={
                            <WeaDropdown keyValue={conditionTop.conditionFields.sign_date} defaultValue={conditionTop.signDate} type="select" datas={toJS(conditionTop.signDateSelectInfo)} onChange={that.selectChange.bind(that)}/>
                        } key="6"></TabPane>
                    </Tabs>;
                }

            }else{
                return null;
            }
            
        })();
            
        return tabBtns;
    }

    onHrmListChange = (arr)=>{
        const {saveHrmList} = this.props.myContractStore;
        saveHrmList(arr);
    }

    getTabSearchTypes(){
        let arr = [];
        arr.push(Bctt.TAB_SEARCH_TYPE_BASE);
        arr.push(Bctt.TAB_SEARCH_TYPE_ADVANCED);
        return arr;
    }

    reRenderColumns(columns){
        let that = this;
        const {synergyStore} = this.props;
        const store = this.getStore();
        const attentions = toJS(store.attentions);
        columns.forEach(c=>{
            if(c.dataIndex=='name'){
                c.render = function(text, record){
                    return <div onClick={(bool)=>{store.showSynergy(true,record.randomFieldId,'home',text),synergyStore.isShowSynergy(bool)}}>
                        <a >{text}</a>
                    </div>
                }
            }else if(c.dataIndex=='id'){
                c.render = function(text, record){
                    let value = 0;
                    if(attentions[record.id]==="1"){
                        value = 1;
                    }
                    return <Rate count={1} value={value} onChange={()=>store.doAttention(value,record.randomFieldId)} />
                }
            }else if(c.dataIndex=='cons_count'){
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span style={{float:'right'}} dangerouslySetInnerHTML={{__html: valueSpan}}></span>;
                }
            }else {
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
                }
            }
        })
        return columns;
    }

    changeData=(key)=>{
        const {changeMainTab} = this.props.myContractStore;
        changeMainTab(key);
    }
    selectChange=(obj)=>{
        const {doSearch} = this.props.myContractStore;
        doSearch(obj);
    }

}

export default WeaTools.tryCatch(React,
    props => <WeaErrorPage msg={ props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
    {error: ""}
)(MyContract);